<template>
  <!--  <Composition></Composition>-->
  <!--  ModalButton-->
  <!--  <ModelButton></ModelButton>-->

  <!--  <Emits @click="onClick"></Emits>-->
  <!--  <comp></comp>-->

  <!--  <ModelTest v-model:counter="counter"></ModelTest>-->
  <!--  <RenderTest v-model:counter="counter">-->
  <!--    <template v-slot:default>title</template>-->
  <!--    <template v-slot:content>content....</template>-->
  <!--  </RenderTest>-->
  <!--  函数式组件-->
  <!--  <Functional level="3">动态的h3</Functional>-->
  <!--异步组件-->
  <!--  <AsyncComp></AsyncComp>-->
  <!--  <TransitionTest></TransitionTest>-->

  <!--  <button @click="sendMsg">发消息</button>-->
  <!--  <router-view></router-view>-->

  <router-view v-slot="{Component}">
    <keep-alive>
      <component :is="Component"/>
    </keep-alive>
  </router-view>
</template>

<script>
import {h, defineAsyncComponent} from 'vue'
import Composition from "./Composition.vue";
import ModelButton from './ModelButton.vue';
import Emits from './Emits.vue'
import ModelTest from './ModelTest.vue'
import Functional from './Functional.vue'
import TransitionTest from "./TransitionTest.vue";
import Todo from './todos/Todo.vue'

import mitt from 'mitt'

export const emitter = mitt()

export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  components: {
    // Composition,
    // ModelButton,
    // Emits,
    // ModelTest,
    RenderTest: {
      props: {
        counter: {
          type: Number,
          default: 0
        }
      },
      render() {
        this.$slots.default()
        this.$slots.content()
        const counter = this.counter
        const emit = this.$emit
        return h('div', [
          h('div', {onClick: this.onClick}, [`I am RenderTest: ${counter}`, this.$slots.default(), this.$slots.content()])
        ])
      },
      methods: {
        onClick() {
          this.$emit('update:counter', this.counter + 1)
        }
      },
    },
    Functional,
    // AsyncComp: import('./NextPage.vue')  // 以前
    AsyncComp: defineAsyncComponent(() => import('./NextPage.vue')),
    TransitionTest,
    Todo
  },
  data() {
    return {
      counter: 1
    }
  },
  methods: {
    onClick() {
      console.log('click me');
    },
    sendMsg() {
      emitter.emit('someEvent', 'fooo')
    }
  },
}
</script>
